<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <!DOCTYPE html>
    <html lang="zh">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>图书轮播展示页面</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
        <style>
            :root {
                --primary-color: #3498db;
                --secondary-color: #2c3e50;
                --accent-color: #e74c3c;
                --light-bg: #f8f9fa;
                --dark-text: #2c3e50;
                --light-text: #ecf0f1;
            }

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            /* body {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
                background-size: 400% 400%;
                animation: gradientBG 15s ease infinite;
                color: var(--dark-text);
                min-height: 100vh;
                padding-top: 60px;
            } */
            body {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                background-image: url('img/华师2.jpg.v');
                /* 更改为你想使用的图片路径 */
                background-size: cover;
                /* 保证图片覆盖整个背景 */
                background-position: center center;
                /* 确保图片居中显示 */
                color: var(--dark-text);
                min-height: 100vh;
                padding-top: 60px;
            }

            @keyframes gradientBG {
                0% {
                    background-position: 0% 50%;
                }

                50% {
                    background-position: 100% 50%;
                }

                100% {
                    background-position: 0% 50%;
                }
            }

            /* 自定义导航栏样式 */
            .navbar {
                background-color: #fff !important;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                padding: 10px 0;
                position: fixed;
                top: 0;
                width: 100%;
                z-index: 1000;
            }

            .app:hover {
                background: #9d9d9d;
                border-radius: 4px;
            }

            .navbar-brand p {
                font-family: "华文行楷", "楷体", cursive;
                font-size: 28px;
                font-weight: bold;
                color: #337ab7 !important;
                margin: 0;
            }

            .navbar-nav .nav-link {
                color: #333 !important;
                font-weight: 500;
                padding: 10px 15px;
                transition: all 0.3s;
            }

            .navbar-nav .nav-link:hover {
                color: #fff !important;
            }

            .navbar-right .nav-link {
                color: #337ab7 !important;
            }

            .main-container {
                max-width: 1200px;
                margin: 40px auto;
                padding: 20px;
            }

            .page-title {
                text-align: center;
                margin-bottom: 40px;
                color: white;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            }

            .page-title h1 {
                font-size: 2.8rem;
                margin-bottom: 10px;
                position: relative;
                display: inline-block;
            }

            .page-title h1::after {
                content: '';
                position: absolute;
                bottom: -10px;
                left: 50%;
                transform: translateX(-50%);
                width: 100px;
                height: 4px;
                background: var(--accent-color);
                border-radius: 2px;
            }

            .page-title p {
                font-size: 1.2rem;
                max-width: 600px;
                margin: 20px auto 0;
                color: rgba(255, 255, 255, 0.9);
                line-height: 1.6;
            }

            .carousel-container {
                background: rgba(255, 255, 255, 0.92);
                border-radius: 15px;
                padding: 30px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
                margin-bottom: 50px;
                position: relative;
                overflow: hidden;
            }

            .carousel-container::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 5px;
                background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
            }

            .carousel-title {
                text-align: center;
                margin-bottom: 25px;
                color: var(--secondary-color);
                font-size: 1.8rem;
                position: relative;
                padding-bottom: 10px;
            }

            .carousel-title::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 80px;
                height: 3px;
                background: var(--primary-color);
                border-radius: 2px;
            }

            #bookCarousel {
                border-radius: 10px;
                overflow: hidden;
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            }

            .carousel-inner {
                border-radius: 10px;
            }

            .carousel-item {
                height: 450px;
                transition: transform 0.6s ease;
            }

            .carousel-item img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }

            .carousel-caption {
                background: rgba(0, 0, 0, 0.7);
                padding: 20px;
                border-radius: 8px;
                bottom: 30px;
                left: 50%;
                transform: translateX(-50%);
                width: 90%;
                max-width: 700px;
            }

            .carousel-caption h3 {
                color: var(--light-text);
                font-size: 1.8rem;
                margin-bottom: 10px;
            }

            .carousel-caption p {
                color: rgba(255, 255, 255, 0.9);
                font-size: 1.1rem;
            }

            .carousel-control-prev,
            .carousel-control-next {
                width: 50px;
                height: 50px;
                background: rgba(255, 255, 255, 0.3);
                border-radius: 50%;
                top: 50%;
                transform: translateY(-50%);
                opacity: 0.8;
                transition: all 0.3s ease;
            }

            .carousel-control-prev:hover,
            .carousel-control-next:hover {
                opacity: 1;
                background: rgba(255, 255, 255, 0.5);
            }

            .carousel-control-prev {
                left: 20px;
            }

            .carousel-control-next {
                right: 20px;
            }

            .carousel-indicators {
                bottom: 15px;
            }

            .carousel-indicators button {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                margin: 0 5px;
                background-color: rgba(255, 255, 255, 0.5);
                border: none;
            }

            .carousel-indicators .active {
                background-color: var(--accent-color);
            }

            /* 新闻动态样式 */
            .news-section {
                margin-top: 50px;
            }

            .section-header {
                text-align: center;
                margin-bottom: 40px;
                color: white;
            }

            .section-header h2 {
                font-size: 2.2rem;
                position: relative;
                display: inline-block;
                padding-bottom: 15px;
            }

            .section-header h2::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 80px;
                height: 4px;
                background: var(--accent-color);
                border-radius: 2px;
            }

            .news-container {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
                gap: 30px;
            }

            .news-card {
                background: rgba(255, 255, 255, 0.92);
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }

            .news-card:hover {
                transform: translateY(-10px);
                box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            }

            .news-image {
                height: 200px;
                overflow: hidden;
            }

            .news-image img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.5s ease;
            }

            .news-card:hover .news-image img {
                transform: scale(1.05);
            }

            .news-content {
                padding: 25px;
            }

            .news-meta {
                display: flex;
                justify-content: space-between;
                margin-bottom: 15px;
                font-size: 0.9rem;
                color: #666;
            }

            .news-date {
                color: var(--accent-color);
                font-weight: 600;
            }

            .news-category {
                background: var(--primary-color);
                color: white;
                padding: 3px 10px;
                border-radius: 20px;
                font-size: 0.85rem;
            }

            .news-title {
                font-size: 1.4rem;
                color: var(--secondary-color);
                margin-bottom: 15px;
                line-height: 1.4;
            }

            .news-excerpt {
                color: #555;
                margin-bottom: 20px;
                line-height: 1.6;
            }

            .read-more {
                display: inline-block;
                color: var(--primary-color);
                font-weight: 600;
                text-decoration: none;
                padding: 8px 0;
                position: relative;
                transition: color 0.3s ease;
            }

            .read-more::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 0;
                height: 2px;
                background: var(--accent-color);
                transition: width 0.3s ease;
            }

            .read-more:hover {
                color: var(--accent-color);
            }

            .read-more:hover::after {
                width: 100%;
            }

            .footer {
                background: rgba(44, 62, 80, 0.95);
                color: var(--light-text);
                text-align: center;
                padding: 30px 0;
                margin-top: 60px;
            }

            .footer-content {
                max-width: 1200px;
                margin: 0 auto;
                padding: 0 20px;
            }

            .footer p {
                margin: 10px 0;
                opacity: 0.8;
            }

            .social-links {
                display: flex;
                justify-content: center;
                gap: 20px;
                margin: 20px 0;
            }

            .social-icon {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 50%;
                color: white;
                font-size: 18px;
                transition: all 0.3s ease;
            }

            .social-icon:hover {
                background: var(--primary-color);
                transform: translateY(-3px);
            }

            @media (max-width: 768px) {
                .carousel-item {
                    height: 350px;
                }

                .page-title h1 {
                    font-size: 2.2rem;
                }

                .carousel-caption {
                    padding: 15px;
                    bottom: 15px;
                }

                .carousel-caption h3 {
                    font-size: 1.4rem;
                }

                .carousel-caption p {
                    font-size: 0.95rem;
                }

                .news-container {
                    grid-template-columns: 1fr;
                }
            }

            @media (max-width: 576px) {
                .carousel-item {
                    height: 280px;
                }

                .page-title h1 {
                    font-size: 1.8rem;
                }

                .navbar-brand p {
                    font-size: 22px;
                }

                .navbar-nav .nav-link {
                    padding: 8px 10px;
                    font-size: 14px;
                }
            }
        </style>
    </head>

    <body>
        <!-- 自定义导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-light" style="background-color:#fff">
            <div class="container-fluid">
                <a class="navbar-brand" href="reader_main.html">
                    <p class="text-primary" style="font-family: 华文行楷; font-size: 28px;">智慧图书馆</p>
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item app">
                            <a class="nav-link" href="reader_books.html">图书查询</a>
                        </li>
                        <li class="nav-item app">
                            <a class="nav-link" href="reader_info.html">个人信息</a>
                        </li>
                        <li class="nav-item app">
                            <a class="nav-link" href="mylend.html">我的借还</a>
                        </li>
                        <li class="nav-item app">
                            <a class="nav-link" href="reader_repasswd.html">密码修改</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="reader_info.html">${readercard.name}, 已登录</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="login.html">退出</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <!-- 主内容区 -->
        <div class="main-container">
            <div class="page-title">
                <h1>欢迎${readercard.name}来到智慧图书馆</h1>
                <p>探索知识的海洋，发现阅读的乐趣。我们为您精选了各类图书资源，满足您的阅读需求。</p>
            </div>

            <!-- 轮播图容器 -->
            <div class="carousel-container">
                <h2 class="carousel-title">本周精选图书</h2>
                <div id="bookCarousel" class="carousel slide" data-bs-ride="carousel">
                    <!-- 轮播图指示器 -->
                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#bookCarousel" data-bs-slide-to="0"
                            class="active"></button>
                        <button type="button" data-bs-target="#bookCarousel" data-bs-slide-to="1"></button>
                        <button type="button" data-bs-target="#bookCarousel" data-bs-slide-to="2"></button>
                    </div>

                    <!-- 轮播图内容 -->
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="img/web书.jpg" alt="推荐图书1">
                            <div class="carousel-caption d-md-block">
                                <h3>Web开发与应用</h3>
                                <p>探索Web世界，感受java的智慧与情感</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="img/数字孪生2.jpeg" alt="推荐图书2">
                            <div class="carousel-caption d-md-block">
                                <h3>数字孪生前沿图书</h3>
                                <p>了解最数字孪生趋势，掌握未来发展先机</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="https://images.unsplash.com/photo-1531346878377-a5be20888e57?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80"
                                alt="推荐图书3">
                            <div class="carousel-caption d-md-block">
                                <h3>历史人文精选</h3>
                                <p>穿越时空，领略人类文明的辉煌历程</p>
                            </div>
                        </div>
                    </div>

                    <!-- 左右箭头控制按钮 -->
                    <button class="carousel-control-prev" type="button" data-bs-target="#bookCarousel"
                        data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">上一个</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#bookCarousel"
                        data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">下一个</span>
                    </button>
                </div>
            </div>

            <!-- 新闻动态 -->
            <div class="news-section">
                <div class="section-header">
                    <h2>图书馆新闻动态</h2>
                    <p>了解最新图书馆活动、资源更新和行业动态</p>
                </div>

                <div class="news-container">
                    <div class="news-card">
                        <div class="news-image">
                            <img src="img/数字孪生1.jpeg" alt="图书馆讲座">
                        </div>
                        <div class="news-content">
                            <div class="news-meta">
                                <span class="news-date">2023-10-15</span>
                                <span class="news-category">活动公告</span>
                            </div>
                            <h3 class="news-title">"数字孪生"主题讲座将于本周六举行</h3>
                            <p class="news-excerpt">
                                图书馆将于本周六下午2点在一楼报告厅举办"数字孪生"主题讲座，特邀知名数字出版专家牛强兽教授主讲，探讨数字孪生对我国工业数字化发展的影响与发展趋势。</p>
                            <a href="#" class="read-more">阅读全文 &raquo;</a>
                        </div>
                    </div>

                    <div class="news-card">
                        <div class="news-image">
                            <img src="img/白皮书.png" alt="新书上架">
                        </div>
                        <div class="news-content">
                            <div class="news-meta">
                                <span class="news-date">2023-10-10</span>
                                <span class="news-category">资源更新</span>
                            </div>
                            <h3 class="news-title">本月新增刘教授出版图书《数字孪生技术及应用》</h3>
                            <p class="news-excerpt">图书馆本月新增图书已全部上架，包括刘教授撰写的《数字孪生技术及应用》等多个数字孪生书籍，其中外文原版图书500余册，欢迎读者前来借阅。
                            </p>
                            <a href="#" class="read-more">阅读全文 &raquo;</a>
                        </div>
                    </div>

                    <div class="news-card">
                        <div class="news-image">
                            <img src="img/数字孪生3.jpg" alt="阅读活动">
                        </div>
                        <div class="news-content">
                            <div class="news-meta">
                                <span class="news-date">2023-10-05</span>
                                <span class="news-category">比赛举办</span>
                            </div>
                            <h3 class="news-title">"数字孪生攻防演练"比赛即将启动</h3>
                            <p class="news-excerpt">
                                “数字孪生攻防演练”是指基于数字孪生技术的攻防对抗演练。数字孪生技术通过虚拟模型实时模拟现实世界的各种行为和事件，因此攻防演练可以在虚拟环境中进行，帮助提升对实际攻防行为的应对能力和反应速度。
                            </p>
                            <a href="#" class="read-more">阅读全文 &raquo;</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 页脚 -->
        <!-- <div class="footer">
            <div class="footer-content">
                <div class="social-links">
                    <a href="#" class="social-icon"><i class="fab fa-weixin"></i></a>
                    <a href="#" class="social-icon"><i class="fab fa-weibo"></i></a>
                    <a href="#" class="social-icon"><i class="fab fa-qq"></i></a>
                    <a href="#" class="social-icon"><i class="fas fa-envelope"></i></a>
                </div>
                <p>智慧图书馆 © 2023 版权所有</p>
                <p>地址：北京市海淀区中关村大街1号 | 电话：010-12345678</p>
                <p>开馆时间：周一至周日 8:00-22:00 | 节假日开放时间另行通知</p>
            </div>
        </div> -->

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
        <script>
            // 初始化轮播图并设置自动切换
            document.addEventListener('DOMContentLoaded', function () {
                const myCarousel = document.getElementById('bookCarousel');
                const carousel = new bootstrap.Carousel(myCarousel, {
                    interval: 4000,
                    wrap: true,
                    pause: 'hover'
                });

                // 添加悬停暂停功能
                myCarousel.addEventListener('mouseenter', () => {
                    carousel.pause();
                });

                myCarousel.addEventListener('mouseleave', () => {
                    carousel.cycle();
                });

                // 添加新闻卡片悬停效果
                const newsCards = document.querySelectorAll('.news-card');
                newsCards.forEach(card => {
                    card.addEventListener('mouseenter', function () {
                        this.style.transform = 'translateY(-10px)';
                        this.style.boxShadow = '0 15px 30px rgba(0, 0, 0, 0.2)';
                    });

                    card.addEventListener('mouseleave', function () {
                        this.style.transform = 'translateY(0)';
                        this.style.boxShadow = '0 8px 20px rgba(0, 0, 0, 0.15)';
                    });
                });
            });
        </script>
    </body>

    </html>